<template>
	<div id="dep-manage" class="w-h-100">
		<el-row :gutter="2" class="w-h-100">
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
				<div class="tree-s h-100" style="padding: 6px 0">
					<el-tree class="h-100" :data="treeData" :highlight-current="true" @node-click="handleNodeClick" :default-expand-all="true" :expand-on-click-node="false" :props="defaultProps"> </el-tree>
				</div>
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
				<div class="w-h-100 pos-r flex-1" style="box-sizing: border-box; overflow: hidden">
					<div class="w-h-100 ver-flex" style="box-sizing: border-box; padding: 6px">
						<div style="box-sizing: border-box" v-searchExtend>
							<el-form class="box-f" ref="queryForm" :inline="true">
								<!-- <el-form-item label="选择搜索方式：">
									<el-input v-model="transferVal" placeholder="请输入人员姓名" />
								</el-form-item> -->
								<!-- <el-form-item> -->
								<!-- 人员名称 -->
								<!-- <template v-if="searchVal === '1'">
										<el-input v-model="transferVal" placeholder="请输入人员姓名" />
									</template> -->
								<!-- 部门名称 -->
								<!-- <template v-else-if="searchVal === '2'">
										<el-input v-model="transferVal" placeholder="请输入部门名称" />
									</template> -->
								<!-- 部门/班组 -->
								<!-- <template v-else>
										<el-select v-model="transferVal" filterable class="m-2" placeholder="部门/班组" @change="acquireChange" value-key="id" popper-class="set-select" :popper-append-to-body="false">
											<el-option v-for="item in recordPle" :key="item.value" :label="item.label" :value="item.value" />
										</el-select>
									</template> -->
								<!-- </el-form-item> -->

								<el-form-item>
									<el-button v-if="$hasPer('DepManage1:add')" @click="nodeClick('')" icon="ele-Plus" type="primary"> 新增 </el-button>
									<el-button v-if="$hasPer('DepManage8:batch')" @click="batchAddUserClick" icon="ele-Plus" type="primary"> 批量新增系统用户 </el-button>
									<el-button v-if="$hasPer('DepManage7:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
									<el-button v-if="$hasPer('DepManage2:download')" icon="ele-Download" @click="downClick">下载模板</el-button>
									<el-upload
										v-if="$hasPer('DepManage3:import')"
										class="upload-demo"
										action="#"
										:auto-upload="false"
										ref="aModel"
										:show-file-list="false"
										:on-change="(file: any) => { ExcelChange(file, getData) }"
										:on-success="onSuccess"
										:limit="1"
									>
										<el-button icon="ele-Upload">导入Excel</el-button>
									</el-upload>
								</el-form-item>
							</el-form>
						</div>
						<div style="box-sizing: border-box; margin-top: 8px" class="flex-1 pos-r">
							<div class="pos-a w-h-100" style="box-sizing: border-box">
								<wj-card class="box-card w-h-100" shadow="never" style="">
									<div style="" class="w-h-100 ver-flex">
										<div class="flex-1 pos-r">
											<div class="pos-a w-h-100">
												<el-table ref="excelRef" :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
													<el-table-column type="index" label="序号" width="55" align="center" :index="indexMethod" />

													<el-table-column min-width="100" :show-overflow-tooltip="true" label="员工姓名" align="center">
														<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
															<template #header>
																<SearchModel typeId="empName" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
															</template>
															<template #default="{ row }">
																{{ row.empName }}
															</template>
														</el-table-column>
													</el-table-column>
													<el-table-column min-width="140" :show-overflow-tooltip="true" label="员工工号" align="center">
														<el-table-column min-width="140" :show-overflow-tooltip="true" align="center">
															<template #header>
																<SearchModel typeId="jobNum" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
															</template>
															<template #default="{ row }">
																{{ row.jobNum }}
															</template>
														</el-table-column>
													</el-table-column>
													<el-table-column min-width="140" :show-overflow-tooltip="true" prop="orgName" label="部门名称" align="center" />
													<el-table-column min-width="100" :show-overflow-tooltip="true" label="性别" align="center">
														<template #default="scope">
															<span v-if="scope.row.gender === '1'">男</span>
															<span v-else>女</span>
														</template>
													</el-table-column>
													<el-table-column min-width="100" :show-overflow-tooltip="true" prop="maritalStatus" label="婚姻状况" align="center" />
													<el-table-column min-width="100" :show-overflow-tooltip="true" prop="politicalIdentity" label="政治身份" align="center" />
													<el-table-column min-width="180" :show-overflow-tooltip="true" prop="cardId" label="身份证号" align="center" />
													<el-table-column min-width="120" :show-overflow-tooltip="true" label="身份证件" align="center">
														<template #default="scope">
															<!-- <div class="path_look" @click="previewPhotoEvent(row, 'cardId_Path')">
                                                    查看身份证</div> -->
															<!-- :href="pathData + scope.row.cardId_Path[0].path" -->
															<el-link v-if="scope.row.cardId_Path && scope.row.cardId_Path.length" target="_blank" :href="pathData + scope.row.cardId_Path[0].path" class="path_look">查看</el-link>
															<div v-else style="color: #c0c4cc" class="path_look">
																<span>暂未上传</span>
															</div>
														</template>
													</el-table-column>
													<el-table-column min-width="120" :show-overflow-tooltip="true" label="员工照片" align="center">
														<template #default="scope">
															<!-- <div class="path_look" @click="previewPhotoEvent(row, 'empImage')">
                                                    查看员工照片</div> -->
															<el-link v-if="scope.row.empImage" target="_blank" class="path_look" :href="pathData + scope.row.empImage_Path">查看</el-link>
															<div v-else style="color: #c0c4cc" class="path_look">
																<span>暂未上传</span>
															</div>
														</template>
													</el-table-column>
													<el-table-column min-width="160" :show-overflow-tooltip="true" prop="email" label="Email" align="center">
														<template #default="scope">
															<span v-if="scope.row.email">{{ scope.row.email }}</span>
															<span v-else>-</span>
														</template>
													</el-table-column>
													<el-table-column min-width="160" :show-overflow-tooltip="true" prop="familyAddress" label="家庭住址" align="center">
														<template #default="scope">
															<span v-if="scope.row.familyAddress">{{ scope.row.familyAddress }}</span>
															<span v-else>-</span>
														</template>
													</el-table-column>
													<el-table-column min-width="160" :show-overflow-tooltip="true" prop="phone" label="手机号" align="center">
														<template #default="scope">
															<span v-if="scope.row.phone">{{ scope.row.phone }}</span>
															<span v-else>-</span>
														</template>
													</el-table-column>
													<el-table-column min-width="160" :show-overflow-tooltip="true" prop="emergencyPhone" label="紧急联系人" align="center">
														<template #default="scope">
															<span v-if="scope.row.emergencyPhone">{{ scope.row.emergencyPhone }}</span>
															<span v-else>-</span>
														</template>
													</el-table-column>
													<el-table-column min-width="160" :show-overflow-tooltip="true" prop="physicalCounts" label="体检数量" align="center">
														<template #default="scope">
															<span v-if="scope.row.physicalCounts">{{ scope.row.physicalCounts }}</span>
															<span v-else>-</span>
														</template>
													</el-table-column>
													<el-table-column min-width="160" :formatter="formatDate" :show-overflow-tooltip="true" prop="inductionDate" label="入职日期" align="center" />
													<el-table-column min-width="160" :formatter="formatDate" :show-overflow-tooltip="true" prop="leaveDate" label="离职日期" align="center" />
													<el-table-column min-width="160" :show-overflow-tooltip="true" label="状态" align="center">
														<template #default="scope">
															<span v-if="scope.row.isEnable">在职</span>
															<span v-else>离职</span>
														</template>
													</el-table-column>
													<el-table-column min-width="160" :show-overflow-tooltip="true" label="备注" align="center">
														<template #default="scope">
															<span v-if="scope.row.remark">{{ scope.row.remark }}</span>
															<span v-else>-</span>
														</template>
													</el-table-column>

													<el-table-column prop="createdTime" min-width="160" :show-overflow-tooltip="true" label="创建时间" align="center" />
													<el-table-column prop="createdUserName" min-width="160" :show-overflow-tooltip="true" label="创建者" align="center" />
													<el-table-column prop="updatedTime" min-width="160" :formatter="otherData" :show-overflow-tooltip="true" label="更新时间" align="center" />
													<el-table-column prop="updatedUserName" min-width="160" :formatter="otherData" :show-overflow-tooltip="true" label="更新者" align="center" />

													<el-table-column min-width="180" label="操作" align="center" fixed="right">
														<el-table-column min-width="180" align="center" fixed="right">
															<template #header>
																<el-button @click="searchClick" icon="ele-Search" type="primary" text> 查询 </el-button>
																<el-button @click="resetClick" icon="ele-Refresh" text> 重置 </el-button>
															</template>
															<template #default="scope">
																<div class="operate-s">
																	<el-button  @click="responsibilityClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">岗位职责</el-button>
																	<el-button v-if="$hasPer('DepManage4:edit')" @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
																	<el-button v-if="$hasPer('DepManage5:delete')" @click="deleteHandle(scope.row.id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">
																		删除
																	</el-button>
																</div>
															</template>
														</el-table-column>
													</el-table-column>
												</el-table>
											</div>
										</div>
										<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
											<el-pagination
												v-model:currentPage="pageNo"
												v-model:page-size="pageSize"
												:total="totalRows"
												:page-sizes="[10, 20, 50, 100]"
												small
												background
												@size-change="handleSizeChange"
												@current-change="handleCurrentChange"
												layout="total, sizes, prev, pager, next, jumper"
												class="w-h-100"
											/>
										</div>
									</div>
								</wj-card>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<add-edit-dep-manage :repairInfo="repairInfo" :isUseDialog="isUseDialog" @updateData="getData" @cancelUseClick="cancelUseClick" @controlUseClick="controlUseClick" />
		<!-- 批量新增系统用户 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" title="批量新增系统用户" v-model="batchAddUserDialog" @close="batchCancel">
			<el-form :model="batchRuleForm" ref="batchRuleFormRef" size="default" label-width="80px" :rules="batchRules">
				<el-divider content-position="left">基础信息</el-divider>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="用户" prop="employeeIds" min-width="120px">
							<el-select filterable v-model="batchRuleForm.employeeIds" placeholder="请选择用户">
								<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="角色" prop="roleIds" min-width="120px">
							<el-select filterable multiple v-model="batchRuleForm.roleIds" placeholder="请选择角色">
								<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="batchCancel">取消</el-button>
				<el-button type="primary" @click="batchConfirm(batchRuleFormRef)"> 确定 </el-button>
			</template>
		</el-dialog>
		<!-- 岗位职责 -->
		 <el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" :title="responsibilityList.empName" v-model="responsibilityDialog" @close="responsibilityCancel">
				<template v-for="(item, index) in responsibilityList.content" :key="item.posId">
					<el-collapse v-model="activeNames">
					<el-collapse-item :title="item.name + '-岗位职责'" :name="index + 1">
						<el-input type="textarea"  :autosize="{ minRows: 3 }" v-model="item.detail" disabled style="border: none; box-shadow: none;" />
					</el-collapse-item>
				</el-collapse>
				</template>
				<div v-if="responsibilityList.content.length==0" style="color: red;">该人员无岗位职责，请先给该员工绑定岗位</div>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, reactive, toRaw, onMounted } from 'vue';
import getTableData from '/@/utils/getTableData';
import {
	sysEmpQueryPageList,
	sysEmpDeleteEmp,
	UploadInportEmpXlsxDataV2,
	sysFileInfoDownload,
	sysFileInfoDownloadFile,
	sysFileInfoPreview,
	sysOrgList,
	sysOrgTree,
	sysRoleList,
	sysEmpRoleAdd,
	sysEmpDutyList
} from '/@/api/centerControl/oms';
import AddEditDepManage from './component/oms/add-edit-dep-manage.vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
// import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
import SearchModel from '/@/views/oms/component/search-model.vue';
import { exportToExcel } from '/@/utils/exportToExcel';
import { Local } from '/@/utils/storage';
export default defineComponent({
	name: 'dep-manage',
	components: {
		AddEditDepManage,
		SearchModel,
	},
	setup(props) {
		// const { proxy } = useCurrentInstance();
		// const $t = proxy.$t;

		const isUseDialog = ref(); // 新增/编辑弹出框隐藏/显示
		const repairInfo = ref(); // 传递子组件数据
		const searchVal = ref('1');
		const transferVal = ref(); // 需要查询的值
		const projectNam = ref(); // 人员名称数据
		const responsiblePle = ref(); // 人员编号数据
		const pathData = ref(import.meta.env.VITE_API_URL + '/'); // 获取地址
		let searchName = '1';
		let searchObj: any = reactive({});
		const aModel: Ref = ref(null);

		/*** 截取日期格式方法 */
		const otherData = (row: any, column: any) => {
			// 获取单元格数据
			let data = row[column.property];
			if (data == null) {
				return '-';
			} else {
				return data;
			}
		};

		/*** 截取日期格式方法 */
		const formatDate = (row: any, column: any) => {
			// 获取单元格数据
			let data = row[column.property];
			if (data == null) {
				return '-';
			}
			if (data === '1900-01-01 00:00:00') {
				return '-';
			}
			let dt = new Date(data);
			let month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
			let date = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
			return dt.getFullYear() + '-' + month + '-' + date;
		};

		/*** resetFun */
		const resetFun = () => {
			let newObj = Object.keys(searchObj);
			if (newObj.length !== 0) {
				newObj.map((i: any) => {
					searchObj[i] = '';
				});
			}
		};

		/*** 搜索类型选择事件 searchChange */
		const searchChange = (val: any) => {
			searchName = val;
			transferVal.value = '';
		};

		/*** acquireChange 搜索下拉框选择的数据 ---- 传给接口数据 */
		const acquireChange = (val: any) => {
			console.log(val);
		};

		const defaultProps: object = {
			children: 'children',
			label: 'title',
		};

		/*** searchClick 查询按钮 */
		const searchClick = () => {
			let newObj = Object.keys(searInfo.value);
			if (newObj.length !== 0) {
				newObj.map((i: any) => {
					searchObj[i] = searInfo.value[i];
				});
			}
		};

		/*** resetClick 重置按钮 */
		const resetClick = () => {
			searInfo.value = {};
			let newObj = Object.keys(searchObj);
			if (newObj.length !== 0) {
				newObj.map((i: any) => {
					searchObj[i] = '';
					// console.log(i);
				});
			}
			initInfoFun();
		};

		/*** nodeClick 新增/编辑点击事件 */
		const nodeClick = (val: string | object) => {
			val !== '' ? (repairInfo.value = JSON.stringify(toRaw(val))) : (repairInfo.value = '');
			isUseDialog.value = true;
		};
		/*** deleteHandle 删除数据事件 */
		const deleteHandle = async (val: String | Number, updateFun: Function) => {
			ElMessageBox.confirm('请确定是否删除此条数据', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					let param = { id: val };
					try {
						let res: any = await sysEmpDeleteEmp(param);
						if (res.success) {
							updateFun();
						}
					} catch (err) {
						return;
					}
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '已取消',
					});
				});
		};

		/*** cancelUseClick 取消事件 */
		const cancelUseClick = () => {
			isUseDialog.value = false;
		};

		/*** controlUseClick 提交事件 */
		const controlUseClick = () => {
			isUseDialog.value = false;
		};

		/*** downClick 下载模板 */
		const downClick = async () => {
			// const res = await sysFileInfoDownload({ pageSize: '9999', pageNo: '1', FileOriginName: 'Emp.Xlsx' });
			// const item = res.data.rows.at(-1);
			// const res1 = await sysFileInfoDownloadFile({ id: item.id });
			// console.log(res1);
			// window.location.href = 'www.baidu.com' // 覆盖当前页
			window.open(toRaw(pathData.value) + 'Upload/SMS/Batch/Emp.xlsx','_blank') // 打开新页面
		};

		/*** ExcelChange 导入Excel */
		const ExcelChange = (item: any, updateFun: Function) => {
			console.log(item);
			let arr: any = [];
			let reader = new FileReader();
			reader.readAsDataURL(item.raw);
			reader.onload = (e: any) => {
				let base64String = e.target.result;
				let param: any = new Object();
				arr.push(item.raw);
				param.ModelType = 'Emp';
				param.FileContent = base64String;
				uploadFun(arr, updateFun);
			};
		};
		/*** uploadFun 批量导入数据接口 */
		const uploadFun = async (arr: Object, updateFun: Function) => {
			aModel.value.clearFiles();
			let res: any = await UploadInportEmpXlsxDataV2({ file: arr });
			if (res.success) {
				updateFun();
				ElMessage({
					type: 'success',
					message: '导入成功',
				});
			}
		};

		/*** onSuccess 文件上传成功时的钩子函数 */
		const onSuccess = (item: any) => {
			console.log(item, 'item');
		};

		const previewPhotoEvent = async (row: any, type: string) => {
			console.log(row);
			if (type === 'empImage') {
				//头像
				if (!row.empImage) return ElMessage.warning('未上传员工照片');
				const res = await sysFileInfoPreview({ id: row.empImage });
				console.log(res);
			} else {
				//身份证
				if (!row.cardId_Path.length) return ElMessage.warning('未上传身份证');
				const res = await sysFileInfoPreview({ id: row.cardId_Path.length && row.cardId_Path[0].id });
				console.log(res);
			}
		};

		/*** 初始化数据 */
		const basicsInfo: any = ref([]);
		const initInfoFun = () => {
			basicsInfo.value = [
				{
					typeId: 'empName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
					typeNam: '', // 输入类型(number,text等) --- 选填
					searchVal: 'empName', // 查询字段 --- 必填
					defaultVal: '', // 字段默认值 --- 选填
					placeholder: '员工姓名', // placeholder数据
					defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
					eventType: '', // 事件类型（如burl/change等） --- 选填
					defaultEvent: '', // 事件名称 --- 选填
				},
				{
					typeId: 'jobNum', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
					typeNam: '', // 输入类型(number,text等) --- 选填
					searchVal: 'JobNum', // 查询字段 --- 必填
					defaultVal: '', // 字段默认值 --- 选填
					placeholder: '员工工号', // placeholder数据
					defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
					eventType: '', // 事件类型（如burl/change等） --- 选填
					defaultEvent: '', // 事件名称 --- 选填
				},
			];
		};

		const searInfo: any = ref();
		const searchHandel = (val: any) => {
			searInfo.value = val;
		};
		const options1: any = ref([]);
		const options2: any = ref([]);
		const treeData = ref([]);
		onMounted(async () => {
			const res = await sysOrgTree();
			console.log(res);
			treeData.value = res.data;

			await initInfoFun();

			// options1
			const res1 = await sysEmpQueryPageList({ type: 1, pageSize: 9999, pageNo: 1 });
			options1.value = res1.data.rows.map((item: any) => {
				return {
					label: item.empName,
					value: item.id,
				};
			});
			//options2
			const res2 = await sysRoleList();
			options2.value = res2.data.map((item: any) => {
				return {
					label: item.name,
					value: item.id,
				};
			});
		});

		const handleNodeClick = (item: any) => {
			console.log(item);
			searchObj.OrgId = item.id;
			// searchObj.orgName = item.title;
		};

		/*** ================================= 导出数据函数操作 ================================= */
		const excelRef: any = ref(null);
		const handleExport = () => {
			if (excelRef.value) {
				if (excelRef.value.data.length !== 0) {
					let tableExcel: any = [];
					let tableArr = excelRef.value.data;
					tableArr.map((item: any) => {
						let tableObj: any = {};
						tableObj['员工姓名'] = item.empName ? item.empName : '-';
						tableObj['员工工号'] = item.jobNum ? item.jobNum : '-';
						tableObj['部门名称'] = item.orgName ? item.orgName : '-';
						tableObj['性别'] = item.gender == 1 ? '男' : '女';
						tableObj['婚姻状况'] = item.maritalStatus ? item.maritalStatus : '-';
						tableObj['政治身份'] = item.politicalIdentity ? item.politicalIdentity : '-';

						tableObj['身份证号'] = item.cardId ? item.cardId : '-';
						tableObj['Email'] = item.email ? item.email : '-';
						tableObj['家庭住址'] = item.familyAddress ? item.familyAddress : '-';
						tableObj['手机号'] = item.phone ? item.phone : '-';
						tableObj['紧急联系人'] = item.emergencyPhone ? item.emergencyPhone : '-';

						tableObj['体检数量'] = item.physicalCounts ? item.physicalCounts : '-';
						tableObj['入职日期'] = item.inductionDate ? item.inductionDate : '-';
						tableObj['离职日期'] = item.leaveDate ? item.leaveDate : '-';
						tableObj['状态'] = item.phone ? '在职' : '离职';
						tableObj['备注'] = item.remark ? item.remark : '-';

						tableObj['创建人'] = item.createdUserName ? item.createdUserName : '-';
						tableObj['创建时间'] = item.createdTime ? item.createdTime : '-';
						tableObj['更新人'] = item.updatedUserName ? item.updatedUserName : '-';
						tableObj['更新时间'] = item.updatedTime ? item.updatedTime : '-';
						tableExcel.push(tableObj);
					});
					exportToExcel(tableExcel, '部门人员.xlsx');
				} else {
					ElMessage({
						type: 'error',
						message: '暂无数据导出',
					});
				}
			}
		};

		// token 键定义
		const accessTokenKey = 'access-token';
		// const refreshAccessTokenKey = `x-${accessTokenKey}`;

		// 获取 token
		// const getToken = () => {
		// 	return Local.get(accessTokenKey);
		// };
		const accessToken = Local.get(accessTokenKey);
		function authenticatedFetch(url, options = {}) {
			const headers = new Headers(options.headers || {});
			headers.set('Authorization', `Bearer ${accessToken}`); // 这里假设是Bearer类型的token

			const fetchOptions = {
				...options,
				headers,
			};

			return fetch(url, fetchOptions)
				.then((response) => {
					if (!response.ok) {
						throw new Error(`Request failed with status: ${response.status}`);
					}
					return response.json();
				})
				.catch((error) => {
					console.error('Authenticated fetch error:', error);
					throw error;
				});
		}

		//岗位职责
		let baseUrl = import.meta.env.VITE_API_URL as any;
		const activeNames = ref('1')
		const responsibilityDialog = ref(false);
		const responsibilityList = ref('')
		const responsibilityClick = async (row:any) => {
			const res = await authenticatedFetch( baseUrl + '/SMS/SMSSecurityResponsibilityCard/GetDetailByEmpId?empId='+row.id)
			console.log(res);
			responsibilityList.value = res.data
			responsibilityDialog.value = true;
		};
		const responsibilityCancel = () => {
			responsibilityList.value = ''
			responsibilityDialog.value = false;
		};

		// 批量新增系统用户
		const batchAddUserDialog = ref(false);
		const batchRules = reactive({
			employeeIds: [{ required: true, message: '请选择人员', trigger: 'blur' }],
			roleIds: [{ required: true, message: '请选择角色', trigger: 'blur' }],
		});
		const batchRuleFormRef = ref();
		const batchRuleForm:any = reactive({
			employeeIds: '',
			roleIds: [],
		});
		const batchAddUserClick = () => {
			batchAddUserDialog.value = true;
		};
		const batchConfirm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			formEl.validate((valid) => {
				if (valid) {
					console.log('submit!');
					batchRuleForm.employeeIds = [batchRuleForm.employeeIds]
					sysEmpRoleAdd(batchRuleForm).then((res) => {
						console.log(res);
						if(res.success){
							batchCancel();
							ElMessage.success(res.message)
						}
					});
				} else {
					console.log('error submit!');
					return false;
				}
			});
		};
		const batchCancel = () => {
			batchRuleFormRef.value.resetFields();
			batchAddUserDialog.value = false;
		};

		return {
			...getTableData(sysEmpQueryPageList, { type: 1 }, searchObj),
			isUseDialog,
			cancelUseClick,
			controlUseClick,
			nodeClick,
			repairInfo,
			deleteHandle,
			resetClick,
			searchClick,
			downClick, // 下载模板
			ExcelChange, // 导入Excel
			onSuccess,
			aModel,
			defaultProps,
			treeData,
			searchOptions: [
				{
					value: '1',
					label: '人员名称',
				},
				{
					value: '2',
					label: '部门名称',
				},
			], // 搜索方式
			searchVal,
			searchChange,
			transferVal,
			acquireChange,
			projectNam, // 人员名称数据
			responsiblePle, // 人员编号数据
			recordPle: [
				{ label: '部门', value: 1 },
				{ label: '班组', value: 2 },
			], // 部门/班组
			pathData,
			formatDate,
			otherData,
			previewPhotoEvent,
			searchHandel,
			basicsInfo,
			handleNodeClick,
			handleExport,
			excelRef,
			batchAddUserClick,
			batchCancel,
			batchConfirm,
			batchAddUserDialog,
			batchRules,
			batchRuleFormRef,
			batchRuleForm,
			options2,
			options1,
			responsibilityClick,responsibilityCancel,responsibilityDialog,responsibilityList, activeNames
		};
	},
});
</script>
<style lang="scss">
@import './style/public.scss';
</style>
<style scoped lang="scss">
#dep-manage {
	.box-f {
		:deep(.el-form-item__label) {
			padding: 0;
		}
	}

	:deep(.el-card__body) {
		height: 100%;
	}

	:deep(.el-card) {
		border: none !important;
	}

	.upload-demo {
		margin-left: 12px;
		margin-top: 2px;
	}

	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}

	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}

	.path_look {
		color: #c0c4cc;
		cursor: pointer;

		&:hover {
			color: #409eff;
		}
	}
}
</style>
